<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--让手机版生效-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--对于thymeleaf来说，加入下面三个引用界面会出现问题，大概是重复引用？可是top那块重复引用就可以...但是iframe必须引入-->
    <!--    <link rel="stylesheet" href="../static/js/bootstrap/bootstrap.min.css" th:href="@{/js/bootstrap/bootstrap.min.css}">-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <!--    <script src="../static/js/bootstrap/bootstrap.js" th:src="@{/js/bootstrap/bootstrap.js}"></script>-->
    <link rel="stylesheet" href="../static/styles/lesson.css" th:href="@{/styles/lesson.css}">
</head>
<body>
    <div class="lesson-root">
        <!--课程详情-->
        <div class="lesson-div">
            <div class="lesson-1">
                <div class="lesson lesson-time" id="lesson-1-month-div">
                    <span>
                        第一节<br>
                        8:00<br>
                        9:50
                    </span>
                </div>
                <div class="lesson" id="lesson-1-1-div">
                    <span id="lesson-1-1"></span>
                </div>
                <div class="lesson" id="lesson-1-2-div">
                    <span id="lesson-1-2"></span>
                </div>
                <div class="lesson" id="lesson-1-3-div">
                    <span id="lesson-1-3"></span>
                </div>
                <div class="lesson" id="lesson-1-4-div">
                    <span id="lesson-1-4"></span>
                </div>
                <div class="lesson" id="lesson-1-5-div">
                    <span id="lesson-1-5"></span>
                </div>
                <div class="lesson" id="lesson-1-6-div">
                    <span id="lesson-1-6"></span>
                </div>
                <div class="lesson" id="lesson-1-7-div">
                    <span id="lesson-1-7"></span>
                </div>
            </div>
            <div class="lesson-2">
                <div class="lesson lesson-time" id="lesson-2-month-div">
                    <span>
                        第二节<br>
                        10:10<br>
                        12:00
                    </span>
                </div>
                <div class="lesson" id="lesson-2-1-div">
                    <span id="lesson-2-1"></span>
                </div>
                <div class="lesson" id="lesson-2-2-div">
                    <span id="lesson-2-2"></span>
                </div>
                <div class="lesson" id="lesson-2-3-div">
                    <span id="lesson-2-3"></span>
                </div>
                <div class="lesson" id="lesson-2-4-div">
                    <span id="lesson-2-4"></span>
                </div>
                <div class="lesson" id="lesson-2-5-div">
                    <span id="lesson-2-5"></span>
                </div>
                <div class="lesson" id="lesson-2-6-div">
                    <span id="lesson-2-6"></span>
                </div>
                <div class="lesson" id="lesson-2-7-div">
                    <span id="lesson-2-7"></span>
                </div>
            </div>
            <div class="lesson-3">
                <div class="lesson lesson-time" id="lesson-3-month-div">
                    <span>
                        第三节<br>
                        13:30<br>
                        15:20
                    </span>
                </div>
                <div class="lesson" id="lesson-3-1-div">
                    <span id="lesson-3-1"></span>
                </div>
                <div class="lesson" id="lesson-3-2-div">
                    <span id="lesson-3-2"></span>
                </div>
                <div class="lesson" id="lesson-3-3-div">
                    <span id="lesson-3-3"></span>
                </div>
                <div class="lesson" id="lesson-3-4-div">
                    <span id="lesson-3-4"></span>
                </div>
                <div class="lesson" id="lesson-3-5-div">
                    <span id="lesson-3-5"></span>
                </div>
                <div class="lesson" id="lesson-3-6-div">
                    <span id="lesson-3-6"></span>
                </div>
                <div class="lesson" id="lesson-3-7-div">
                    <span id="lesson-3-7"></span>
                </div>
            </div>
            <div class="lesson-4">
                <div class="lesson lesson-time" id="lesson-4-month-div">
                    <span>
                        第四节<br>
                        15:40<br>
                        17:30
                    </span>
                </div>
                <div class="lesson" id="lesson-4-1-div">
                    <span id="lesson-4-1"></span>
                </div>
                <div class="lesson" id="lesson-4-2-div">
                    <span id="lesson-4-2"></span>
                </div>
                <div class="lesson" id="lesson-4-3-div">
                    <span id="lesson-4-3"></span>
                </div>
                <div class="lesson" id="lesson-4-4-div">
                    <span id="lesson-4-4"></span>
                </div>
                <div class="lesson" id="lesson-4-5-div">
                    <span id="lesson-4-5"></span>
                </div>
                <div class="lesson" id="lesson-4-6-div">
                    <span id="lesson-4-6"></span>
                </div>
                <div class="lesson" id="lesson-4-7-div">
                    <span id="lesson-4-7"></span>
                </div>
            </div>
            <div class="lesson-5">
                <div class="lesson lesson-time" id="lesson-5-month-div">
                    <span>
                        第五节<br>
                        18:30<br>
                        20:00
                    </span>
                </div>
                <div class="lesson" id="lesson-5-1-div">
                    <span id="lesson-5-1"></span>
                </div>
                <div class="lesson" id="lesson-5-2-div">
                    <span id="lesson-5-2"></span>
                </div>
                <div class="lesson" id="lesson-5-3-div">
                    <span id="lesson-5-3"></span>
                </div>
                <div class="lesson" id="lesson-5-4-div">
                    <span id="lesson-5-4"></span>
                </div>
                <div class="lesson" id="lesson-5-5-div">
                    <span id="lesson-5-5"></span>
                </div>
                <div class="lesson" id="lesson-5-6-div">
                    <span id="lesson-5-6"></span>
                </div>
                <div class="lesson" id="lesson-5-7-div">
                    <span id="lesson-5-7"></span>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" th:inline="javascript">
    window.onload = function () {
        setLesson();
    };
    //填充课程
    function setLesson() {
        const lessonList = [[${lesson_list}]];
        const userConfig = [[${user_config}]];
        $(function () {
            $('.lesson').css("color", userConfig.textColor);
            $('.lesson').css("font-size", userConfig.textSize + "px");
            //需要设置这两个来设置高度
            $('.lesson').css("line-height", userConfig.height + "px");
            $('.lesson-div').css("height", userConfig.height + "px");
            $('.lesson-time').css("color", userConfig.textColor);
            $('.lesson-time').css("font-size", userConfig.textSize + "px");

            for (let i = 0; i < lessonList.length; i++) {
                //只有这周的才会显示
                if (lessonList[i].weeks.toString().indexOf([[${this_week}]]) != -1) {
                    const lessonDivId = '#lesson-' + lessonList[i].start + '-' + lessonList[i].dayOfWeek + '-div';
                    const lessonSpanId = 'lesson-' + lessonList[i].start + '-' + lessonList[i].dayOfWeek;

                    //这块不能用jquery，而且注意一下是innerHTML不是innerText
                    let lessonString = lessonList[i].lessonName + '<br/>@' + lessonList[i].location;
                    if (userConfig.showTeacher) lessonString += '<br/>' + lessonList[i].teacher;
                    document.getElementById(lessonSpanId).innerHTML = lessonString;

                    $(lessonDivId).css("background", hexToRgba(lessonList[i].color, userConfig.alpha));

                    //解绑默认右键点击绑定自己的右键用于实现自定义操作
                    document.oncontextmenu = function () {
                        return false;
                    };
                    $(lessonDivId).mousedown(function (event) {
                        if (event.which == 3) {
                            Swal.fire({
                                title: "删除",
                                text: "您是否要删除\"" + lessonList[i].lessonName + "\"？该操作无法撤销！",
                                icon: "warning",
                                confirmButtonText:'确定',
                                showCancelButton: true,
                                cancelButtonText:'取消',
                                reverseButtons: true,
                                dangerMode: true,
                            }).then((input) => {
                                if (input.value) {
                                    $.ajax({
                                        type: 'POST',
                                        url: 'delete_lesson',
                                        dataType: 'json',
                                        data: {lessonId: lessonList[i].lessonId, start: lessonList[i].start, end: lessonList[i].end},
                                        success: function (result) {
                                            if (result.resultCode == 200) {
                                                Swal.fire('成功', '删除成功', 'success').then((ok) => {
                                                    if (ok.value) {
                                                        window.location.href = '/lesson_detail'
                                                    }
                                                });
                                            } else {
                                                Swal.fire('错误', '删除课程时出现问题0', 'error')
                                            }
                                        },
                                        error: function () {
                                            Swal.fire('错误', '删除课程时出现问题', 'error')
                                        }
                                    })
                                }
                            });
                        }
                    });
                }
            }
        })
    }
    //字符串类型颜色转换成rgba形式
    function hexToRgba (hex, opacity) {
        return hex && hex.replace(/\s+/g, '').length === 7 ? 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' +
            parseInt('0x' + hex.slice(3, 5)) + ',' +
            parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')' : ''
    }
</script>
</html>